<template>
  <div>
    <div ref="chartRef" style="width: 1000px; height: 400px"></div>
    <div ref="pieChart" style="width: 700px; height: 400px"></div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

const chartRef = ref(null);
const pieChart = ref(null);

onMounted(() => {
  const chartInstance = echarts.init(chartRef.value);

  const option = {
    // 这里配置你的图表选项
    title: { text: "专业人数统计图" },
    legend: {
      orient: "vertical",
      left: "right",
    },
    tooltip: {},
    xAxis: {
      data: [
        "计算机科学",
        "土木工程",
        "经济管理",
        "数学",
        "物理",
        "化学",
        "生物",
        "车辆管理",
        "电子商务",
      ],
    },

    yAxis: {},
    series: [
      {
        name: "人数",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20, 90, 80, 20, 6],
      },
    ],
  };
  chartInstance.setOption(option);

  const chartInstance2 = echarts.init(pieChart.value);

  // 假设男性人数为70，女性人数为30
  const data = [
    { value: 70, name: "男性" },
    { value: 30, name: "女性" },
  ];

  const option2 = {
    title: { text: "全校男女比例" },

    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "right",
    },
    series: [
      {
        name: "人数",
        type: "pie",
        radius: "75%",
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };

  chartInstance2.setOption(option2);
});
</script>
